<template>
	<div id="Record">
		<x-header :left-options="{showBack: false}" title="出价记录" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="cordList">
			<ul>
				<li v-for="(item,index) in recordList">
					<p>
						<span v-if="index==0" class="sign">领先</span>
						<span v-else class="sign out">出局</span>
						<i class="price">￥{{parseInt(item.bidding_money)}}</i>
						<b class="name">{{item.member_nickname}}</b>
						<span class="timer">{{timer2time(item.bidding_time)}}</span>
					</p>
				</li>
			</ul>
		</div>

	</div>
</template>

<script>
	import { XHeader } from 'vux'
	import $ from 'jquery'
	import axios from 'axios'
	export default {
		data() {
			return {
				recordList: [],
				bidding_time_date: ''
			}
		},
		components: {
			XHeader
		},
		mounted() {
			this.getRecordInfo();
			//将时间戳转换成日期的封装函数
			Date.prototype.Format = function(fmt) {
				var o = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate(),
					"h+": this.getHours(),
					"m+": this.getMinutes(),
					"s+": this.getSeconds(),
					"q+": Math.floor((this.getMonth() + 3) / 3),
					"S": this.getMilliseconds()
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}
		},
		methods: {
			getRecordInfo: function() {
				let _this = this;
				let more = true;
				let page = 1;
				let auction_id = this.$route.params.id;
				this.$http({
					method: 'GET',
					url: '/los/api/auction/goods_bidding.json?auction_id=' + auction_id,
					data: ''
				}).then((result) => {
					this.recordList = result.data.data.list;
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/auction/goods_bidding.json?auction_id=' + auction_id + '&page=' + page).then(function(result) {
								$.each(result.data.data.list, function(index, val) {
									_this.recordList.push(val);
								});
								more = true;
								if(result.data.data.page_count >= result.data.data.page) {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})
			},
			//将时间戳转换成日期
			timer2time: function(time) {
				return new Date(parseInt(time) * 1000).Format("MM-dd hh:mm:ss");
			},
			back: function() {
				window.history.go(-1);
			}
		}

	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.cordList {
		width: 100%;
		background: #fff;
		position: relative;
	}
	
	.cordList:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.cordList ul li {
		width: 100%;
		line-height: 1.3rem;
		padding: 0 0.26rem;
		height: 1.3rem;
		font-size: 0.37rem;
		overflow: hidden;
		position: relative;
	}
	
	.cordList ul li p {
		overflow: hidden;
	}
	
	.cordList ul li p .sign {
		float: left;
		width: 1.06rem;
		height: 0.56rem;
		background: #a30000;
		color: #fff;
		line-height: 0.56rem;
		display: inline-block;
		text-align: center;
		border-radius: 0.05rem;
		margin-top: 0.37rem;
	}
	
	.cordList ul li p .out {
		background: #777;
	}
	
	.cordList ul li p .price {
		float: left;
		margin-left: 0.26rem;
		width: 2rem;
		display: inline-block;
		color: #da4240;
		font-style: normal;
		text-align: center;
	}
	
	.cordList ul li p .name {
		float: left;
		color: #333;
		overflow: hidden;
		display: inline-block;
		width: 2.7rem;
	}
	
	.cordList ul li p .timer {
		float: right;
		display: inline-block;
		color: #aaa;
		font-size: 0.32rem;
	}
	
	.cordList ul li:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e6e6e6;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
</style>